<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧 -->
      <el-aside>
        <el-header style="color:black">
          Co-Nova
        </el-header>
        <!-- 左侧菜单栏-->
        <Aside :collapsed="collapsed">

        </Aside></el-aside>
        <!-- 右侧内容 -->
      <el-container>
        <!-- 右侧header -->
        <el-header>
          <div>
                <!-- 侧边栏按钮展开折叠 -->
                 <!-- 并且给这个图标一个点击事件 让collapsed取反 -->
                 <el-icon style="font-size:26px;    color: pink;"  @click="()=>(collapsed = !collapsed)">
                      <component :is="collapsed ? Expand :Fold" 
                 
                />
                 </el-icon>
          </div>
          <Header></Header>
        </el-header>
        <!-- 右侧主内容 -->
        <el-main>
          <router-view >
           
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { RouterView } from "vue-router";
import {  ref } from 'vue';
import Header from "./header/index.vue";
import Aside from "./aside/index.vue";
 //引入图标
 import {Expand,Fold} from '@element-plus/icons-vue'
const collapsed =ref<boolean>(false)
</script>
<style  scoped>
.el-aside {
  width: auto;
}
.common-layout {
  background-color: #E9F3FD; /* 半透明的白蓝色 */ 
  backdrop-filter: blur(10px); /* 毛玻璃效果 */  
  
}
.el-header {
  display: flex;
  justify-content:space-between;
  align-items: center;
  /* background-color: rgb(73, 126, 172); */
  width: 100%;
}
.el-main{
  
  margin: 20px;
 

  color: #1b1c1d;
  background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 0.8px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 13px;
-webkit-border-radius: 13px;


}
</style>
